// 参课管理
<template>
	<div class="all">
    <el-button @click="addJCourse()" type="primary">增加参课人员</el-button>
    <div id="searchdiv">
      <el-input placeholder="课程名称" v-model="keywords" class="input-with-select">
        <el-select v-model="select" slot="prepend" style="width: 110px;">
          <el-option label="课程名称":value="1":key="1"></el-option>
          <el-option label="用户名称":value="2":key="2"></el-option>
        </el-select>
        <el-button @click="getJoinInfo()" slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <div style="height: 10px;"></div>

		<el-table :data="pagination.records" border>
			<el-table-column fixed="left" prop="joinId" label="参课编号"></el-table-column>
			<el-table-column prop="course.courseId" label="课程编号"></el-table-column>
			<el-table-column prop="course.courseName" label="课程名称"></el-table-column>
			<el-table-column prop="user.userId" label="用户编号"></el-table-column>
			<el-table-column prop="user.userName" label="用户姓名"></el-table-column>
			<el-table-column fixed="right" label="操作">
				<template slot-scope="scope">

					<el-button @click="deleteById(scope.row.joinId)" type="danger" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current"
		 :page-sizes="[6, 10]" :page-size="pagination.size" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
		 class="page">
		</el-pagination>

		<!-- 增加人员的对话框-->
		<el-dialog title="增加参课人员" :visible.sync="addDialogVisible" width="30%" :before-close="handleClose">
			<section class="update">
				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item label="课程编号">
					  <el-select v-model="form.course.courseId" placeholder="请选择课程" @change="getCourseName(form.course.courseId)">
					    <el-option v-for="(item,index) in course" :key="item+index" :label="item.courseId" :value="item.courseId"></el-option>
					  </el-select>
					</el-form-item>
					<el-form-item label="课程名称">
						<el-input disabled="" v-model="form.course.courseName"></el-input>
					</el-form-item>
					<el-form-item label="学生编号">
					  <el-select v-model="form.user.userId" placeholder="请选择课程" @change="getUserName(form.user.userId)">
					    <el-option v-for="(item,index) in user" :key="item+index" :label="item.userId" :value="item.userId"></el-option>
					  </el-select>
					</el-form-item>
					<el-form-item label="学生名称">
						<el-input disabled="" v-model="form.user.userName"></el-input>
					</el-form-item>
				</el-form>
			</section>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				pagination: {
					//分页后的考试信息
					current: 1, //当前页
					total: null, //记录条数
					size: 6, //每页条数
				},
				select: 1,
				keywords:'',
				addDialogVisible: false, //增加的对话框
				form: {
					joinId:'',
					course:{courseId:'',courseName:''},
					user:{userId:'',userName:''}
				}, //保存点击以后当前试卷的信息
				teacher:{userId:this.$cookies.get("cid"),userName:this.$cookies.get("cname")},
				course:[],
				user:[]
			};
		},
		created() {
			this.getJoinInfo();
		},
		methods: {
			getJoinInfo() {
				if(this.select == 1){
				  //分页查询所有试题信息 ✔
				  this.$axios( '/api/joincourse/listjoincoursebyteacherbycla',{
				    params: {
						userId:this.teacher.userId,
				      keywords:this.keywords,
				      level:this.level,
				      type:this.type,
				      page:this.pagination.current,
				      limit:this.pagination.size
				    }
				  }).then(res => {
				  	this.pagination = res.data;
				  }).catch(error => {});
				}else if(this.select == 2){
				  //分页查询所有试题信息 ✔
				  this.$axios( '/api/joincourse/listjoincoursebyteacherbystu',{
				    params: {
						userId:this.teacher.userId,
				      keywords:this.keywords,
				      level:this.level,
				      type:this.type,
				      page:this.pagination.current,
				      limit:this.pagination.size
				    }
				  }).then(res => {
				  	this.pagination = res.data;
				  }).catch(error => {});
				}
			},
			//改变当前记录条数
			handleSizeChange(val) {
				this.pagination.size = val;
				this.getJoinInfo();
			},
			//改变当前页码，重新发送请求
			handleCurrentChange(val) {
				this.pagination.current = val;
				this.getJoinInfo();
			},
			getAllUserId(){ //获取所有教师编号 ✔
			  this.$axios( '/api/getusers/2').then(res => {
				  console.log(res.data)
			      this.user = res.data;
			  })
			},
			getCourseName(CourseId){  //根据课程编号获取课程名 ✔
			  this.$axios( '/api/course/getCouById/'+CourseId).then(res => {
			    this.form.course.courseName = res.data
			  })
			},
			getAllCourseId(){ //获取所有课程编号 ✔
			  this.$axios( '/api/course/getCouAllByTea/'+this.teacher.userId).then(res => {
			      this.course = res.data
			  })
			},
			getUserName(userId){
				this.$axios( '/api/getusername/'+userId).then(res => {
				  this.form.user.userName = res.data
				})
			},
			addJCourse() { //修改学生信息
				this.form={
					joinId:'',
					course:{courseId:'',courseName:''},
					user:{userId:'',userName:''}
				}
				this.getAllUserId()
				this.getAllCourseId()
				this.addDialogVisible = true
				
			},
			deleteById(joinId) { //删除当前学生
				this.$confirm("确定删除当前参课信息吗？删除后无法恢复", "Warning", {
					confirmButtonText: '确定删除',
					cancelButtonText: '算了,留着吧',
					type: 'danger'
				}).then(() => { //确认删除
					this.$axios({
						url:  `/api/joincourse/deletejoincourse/`+joinId,
						method: 'get',
					}).then(res => {
						this.getJoinInfo()
					})
				}).catch(() => {

				})
			},
			submit() { //提交更改
				this.addDialogVisible = false
				this.$axios({
					url:  '/api/joincourse/addjoincourse',
					method: 'post',
					data: {
						...this.form
					}
				}).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						this.$message({
							message: '添加成功',
							type: 'success'
						})
					}
					this.getJoinInfo()
				})
			},
			handleClose(done) { //关闭提醒
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					}).catch(_ => {});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.all {
		padding: 0px 40px;

		.page {
			margin-top: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.edit {
			margin-left: 20px;
		}

		.el-table tr {
			background-color: #dd5862 !important;
		}
	}

	.el-table .warning-row {
		background: #000 !important;
	}

	.el-table .success-row {
		background: #dd5862;
	}

  #searchdiv{
    width: 400px;
    display: inline-block;
    margin-left: 66%;
  }
</style>
